<template>
  <view class="list">
    <view class="active-item dis-flex" v-for="(item, index) in itemList" :key="index">
      <view class="fanli-detail dis-flex">
        <image
          @click="routeTo('/shops/goods-detail?goodsId=' + item.id)"
          class="goods-avarar"
          border-radius="10"
          :src="item.picUrl"
          style="width: 100%; height: 345rpx"
          mode="aspectFill"
        ></image>
        <view class="goods-con">
          <view
            @click="routeTo('/shops/goods-detail?goodsId=' + item.id)"
            class="dis-flex flex-y-between"
            style="flex: 1; flex-flow: column; margin-bottom: 20rpx"
          >
            <view class="dis-flex flex-y-between" style="width: 100%">
              <view style="width: 60%" class="tl oneline-hide-1">{{ item.name }}</view>
              <text style="font-size: 26rpx">{{ item.limitMinQuantity }}件起批</text>
            </view>
            <view class="price">
              <view class="dis-flex flex-y-between">
                <view>
                  <text>原价:¥</text>
                  <text class="num">{{ item.priceYuan }}</text>
                </view>
                <text> 已售{{ item.salesCount }}</text>
              </view>
              <view class="red-text" v-if="item.vipPrice">
                <text>会员价:¥</text>
                <text class="num">{{ item.vipPriceYuan }} </text>
              </view>
            </view>
            <view class="type dis-flex flex-y-between">
              <view class="demo-shop">
                <view class="points" v-if="item.cryptocurrencyDeductCount">
                  {{ item.cryptocurrencyDeductCount }}豆抵扣{{
                    item.cryptocurrencyDeductPriceYuan
                  }}元
                </view>
                <view class="points" v-else>不支持豆抵扣</view>
              </view>
            </view>
            <view class="points" v-if="item.pointDeductCount">
              {{ item.pointDeductCount }}积分抵¥{{ item.pointDeductPriceYuan }}
            </view>
            <view class="points" v-else>不支持积分抵扣</view>
          </view>

          <view
            class="bottom dis-flex flex-y-center flex-y-between"
            @click="routeTo('/shops/store?shopId=' + item.shop.id)"
          >
            <view class="store-name oneline-hide-1" style="margin-right: 10rpx"
              >{{ item.shop.name }}
            </view>
            <u-icon name="/static/enter.png" size="20"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goods-box',
  props: {
    itemList: {
      type: Array
    }
  },
  data() {
    return {}
  },
  methods: {
    onRemove(res) {
      console.log(res)
    },
    beforeUpload(index, list) {
      console.log(index, list)
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;

  .active-item:nth-child(odd) {
    margin-right: 20rpx;
  }

  .active-item {
    width: calc(100% / 2 - 15rpx); // 调整宽度以适合每行 2 个项目
    display: inline-block;
    height: 680rpx;
    margin-bottom: 20rpx;
    margin-right: 0;
    background-color: #fff;

    .fanli-detail {
      width: 100%;
      height: 100%;
      padding: 0;
      margin-bottom: 30rpx;
      flex-flow: column;

      .goods-avarar {
        border-radius: 10rpx;
        background-color: #fff;
      }

      .goods-con {
        padding: 20rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        height: 335rpx;

        .tl {
          font-size: 28rpx;
          color: #333333;
        }

        .points {
          font-size: 24rpx;
          color: #ff6f10;
        }

        .type {
          font-size: 22rpx;
          color: #999999;
        }

        .price {
          font-size: 26rpx;
          color: #333333;

          .num {
            font-size: 32rpx;
            font-weight: 600;
          }

          .red-text {
            color: #fa453c;
          }
        }

        .bottom {
          font-size: 26rpx;
          color: #666666;
          width: 100%;
        }
      }
    }
  }
}
</style>
